import { 
  AmbientLight,
  AnimationAction,
  AnimationMixer,
  BoxGeometry,
  Clock,
  Color,
  IcosahedronGeometry,
  Mesh,
  MeshLambertMaterial,
  MeshStandardMaterial,
  PerspectiveCamera,
  PlaneGeometry,
  PointLight,
  RepeatWrapping,
  Scene, 
  SphereGeometry, 
  SpotLight, 
  SpotLightHelper, 
  Texture, 
  TextureLoader, 
  Vector2, 
  WebGLRenderer
} from "three";
import stats from '../utils/stats';
// 调用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'dat.gui';

let scene = new Scene();
let renderer = setRenderer();
let camera = setCamera();

let light = setLight();
let { sphere, cube } = init();
addGUI();

const trackballControls = new OrbitControls(camera, renderer.domElement);
// 调整场景位置
trackballControls.target.set(0, 3, 0);

function render() {
  stats.update();
  trackballControls.update();

  sphere.rotation.y += 0.01;
  cube.rotation.y -= 0.01;

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

function setRenderer() {
  const renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 支持阴影生成 
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  return renderer
}

function setCamera(): PerspectiveCamera {
  let camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0, 20, 40);
  scene.add( camera );

  return camera;
}

// 灯光设置
function setLight() {
  let spotLight = new SpotLight(0xffffff);
  spotLight.position.set(-10, 30, 40);
  spotLight.shadow.mapSize.width = 2048;
  spotLight.shadow.mapSize.height = 2048;
  spotLight.shadow.camera.fov = 15;
  spotLight.decay =2;
  spotLight.penumbra = 0.05;
  spotLight.castShadow = true;
  spotLight.intensity = 0.1;

  scene.add(spotLight);

  return spotLight;
}

/** 功能区 */
function init() {
  let textureLoader = new TextureLoader();

  let planeGeom = new PlaneGeometry(60, 40, 1, 1);
  let planeMate = new MeshLambertMaterial({
    color: 0xffffff,
    map: textureLoader.load('/textures/general/floor-wood.jpg')
  });
  const plane = new Mesh(planeGeom, planeMate);
  plane.receiveShadow = true;
  plane.rotation.x = -Math.PI / 2;
  scene.add(plane);

  // https://threejs.org/docs/index.html#api/zh/materials/MeshStandardMaterial
  let material = new MeshStandardMaterial({
    // 材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。
    emissive: 0xffffff,
    // 设置放射（发光）贴图
    emissiveMap: textureLoader.load('/textures/emissive/lava.png'),
    // 用于创建法线贴图的纹理
    normalMap: textureLoader.load('/textures/emissive/lava-normals.png'),
    // 该纹理的蓝色通道用于改变材质的金属度
    metalnessMap: textureLoader.load('/textures/emissive/lava-smoothness.png'),
    metalness: 1,
    roughness: 0.4,
    // 法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。
    normalScale: new Vector2(4, 4)
  })

  // 创建球
  let sphereGeom = new SphereGeometry(4, 180, 180);
  let sphere = new Mesh(sphereGeom, material);
  sphere.position.set(5, 4, 0);
  sphere.castShadow = true;
  scene.add(sphere);

  let cubeGeom = new BoxGeometry(8, 8, 8);
  let cube = new Mesh(cubeGeom, material);
  cube.position.set(-5, 4, 0);
  cube.castShadow = true;
  scene.add(cube);

  return { sphere, cube }
}


function addGUI(): void {
  const controls = {
    normalScaleX: 1,
    normalScaleY: 1
  }
  const gui = new GUI();  

  gui.add(light, 'intensity', 0, 1)
}